<template>
    <div class="login-page">
        <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="60px" class="demo-ruleForm">
            <el-form-item label="账号" prop="username">
                <el-input type="text" v-model="ruleForm.username" placeholder="手机号/邮箱" clearable></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input type="password" v-model="ruleForm.password" placeholder="密码" clearable show-password></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" size="medium" :disabled="disabled" @click="submitForm('ruleForm')">提交</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
    import { router, addAsyncRoutes } from '@/router';
    import userRoutes from '@/router/userRoutes';
    import { login } from '@/api/account';
    export default {
        name: "Login",
        data (){
            return {
                disabled: false,
                ruleForm: {
                    username: '',
                    password: ''
                },
                rules: {
                    account: [{ required: true, message: '请输入账号', trigger: 'blur' }],
                    password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
                }
            }
        },
        methods: {
            submitForm (formName){
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.disabled = true;
                        login(this.$qs.stringify({
                            usertype: 0,
                            client_id: 1,
                            client_secret: 'server',
                            grant_type: 'password',
                            username: this.ruleForm.username,
                            password: this.ruleForm.password
                        })).then(res => {
                            if(res.access_token){

                                this.$message({
                                   type: 'success',
                                   message: '登录成功'
                                });

                                // 设置cookie
                                this.utils.setCookie('USER_TOKEN', res.access_token, 0.5);

                                // 存储权限路由
                                addAsyncRoutes(router, userRoutes);

                                // 获取用户基本信息


                                // 重定向
                                const { query: { redirect } } = this.$route;
                                const path = redirect ? decodeURIComponent(redirect) : '/user';
                                this.$router.push(path, () => {});
                            }
                        }).finally(() => {
                            this.disabled = false
                        })
                    }
                })
            }
        }
    }
</script>
